<template>
  <div>
    <div class="head">
      <div class="back"><router-link to="/home">< 返回</router-link></div>
      <div class="no">不凡</div>
    </div>
    <div class="search">
      <div class="input"><input type="text" placeholder="搜索"  v-model="ipt"/></div>
      <ul>
          <li v-for="(item, index) in list" :key="index">{{item}}</li>
      </ul>
    </div>
    <div class="white"></div>
    <div class="now">显示当前位置</div>
    <div id="allmap"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ipt: "",
      map: "",
      list: []
    };
  },
  watch: {
    ipt() {
        let that = this;
      var options = {
        onSearchComplete: function (results) {
          // 判断状态是否正确
          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            var s = [];
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              s.push(
                results.getPoi(i).title + ", " + results.getPoi(i).address
              );
            }
            //保存列表的值
            that.list = s;
            // console.log(that.list)
          }
        },
      };
      var local = new BMap.LocalSearch(this.map, options);
      local.search(this.ipt);
    //   console.log(this.list)
    },
  },
  computed: {},
  created() {},
  mounted() {
    var that = this;
    var map = new BMap.Map("allmap");
    this.map = map;
    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 12);

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(
      function (r) {
        console.log(r);
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point);
          map.addOverlay(mk);
          map.panTo(r.point);
        } else {
          alert("failed" + this.getStatus());
        }
      },
      { enableHighAccuracy: true }
    );
  },
  methods: {},
};
</script>

<style lang='scss'>
.head {
  width: 100%;
  height: 50px;
  background-color: white;
  border-bottom: 2px solid #f5f5f5;
}
a {
  color: #bb286a;
}
.head div {
  float: left;
  color: #bb286a;
  height: 100%;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.no {
  margin-left: 36%;
  transform: translateX(-50%);
}
.search {
  width: 100%;
  height: 62px;
  margin-top: 15px;
}
.input {
  width: 100%;
}
.input input {
  width: 340px;
  height: 48px;
  margin-left: 50%;
  transform: translateX(-50%);
  border: 1px solid grey;
}
.white {
  width: 100%;
  height: 400px;
}
.now{
    text-align: left;
    font-weight: 900;
    font-size: 22px;
}
#allmap {
  width: 375px;
  height: 200px;
}
</style>
<style scoped>
</style>